﻿<UserControl x:Class="Songhay.Silverlight.BiggestBox.AdditionalSamplesPart.Views.TelerikRadialGaugeCustomizedSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:galaEx="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL5"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:telerikgauges="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
    xmlns:vm="clr-namespace:Songhay.Silverlight.BiggestBox.AdditionalSamplesPart.ViewModels"
    Tag="Telerik Radial Gauge Customized Sample (2011 Telerik Release)"
    Width="512" Height="400">
    <UserControl.Resources>
        <vm:TelerikRadialGaugeViewModel x:Key="TelerikRadialGaugeViewModelDataSource" d:IsDataSource="True" />

        <DataTemplate x:Key="CustomRadialGaugeTick">
            <Rectangle
                Fill="#FFD10008"
                Stroke="{Binding Path=Properties.BorderBrush}"
                StrokeThickness="{Binding Path=Properties.BorderThickness.Left}"
                Stretch="Fill"
            />
        </DataTemplate>

        <DataTemplate x:Key="CustomRadialGaugeTickLabel">
            <TextBlock x:Name="text"
                HorizontalAlignment="Center"
                FontFamily="{Binding Path=Properties.FontFamily}"
                FontSize="{Binding Path=Properties.FontSize}"
                Foreground="{Binding Path=Properties.Foreground}"
                Opacity="{Binding Path=Properties.Opacity}"
                Margin="16">
                <Run Foreground="{Binding ElementName=text, Path=Foreground}">
                    <Binding>
                        <Binding.Converter>
                            <telerikgauges:LabelFormatConverter />
                        </Binding.Converter>
                    </Binding>
                </Run><Run FontSize="10">%</Run>
            </TextBlock>
        </DataTemplate>

        <ControlTemplate x:Key="CustomRadialGaugeBackground" TargetType="ContentControl">
            <Ellipse
                Width="{TemplateBinding Height}" Height="{TemplateBinding Height}"
                StrokeThickness="7" d:DesignWidth="290" d:DesignHeight="291">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="0,1">
                        <GradientStop Offset="0.074" Color="Black" />
                        <GradientStop Offset="0.73" Color="#FF5E6E5A" />
                        <GradientStop Offset="1" Color="#005E6E5A" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                    <RadialGradientBrush>
                        <GradientStop Color="#AF5E6E5A" Offset="0.974"/>
                        <GradientStop Color="#AF000000" Offset="0.948"/>
                        <GradientStop Color="#AF000000" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.Stroke>
            </Ellipse>
        </ControlTemplate>

        <ControlTemplate x:Key="CustomRadialGaugeForeground" TargetType="ContentControl">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="1"
                    FontFamily="Arial"
                    FontSize="16"
                    Foreground="LightGray" Opacity="0.8"
                    Text="System Output"
                    TextAlignment="Center"
                    />
            </Grid>
        </ControlTemplate>

        <Style x:Key="CustomNeedle" TargetType="telerikgauges:Needle">
            <Setter Property="Location" Value="Inside" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid x:Name="PART_Grid" 
                          HorizontalAlignment="Stretch" 
                          VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid x:Name="PART_Shape" 
                              Grid.Column="1"
                              Grid.ColumnSpan="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.1*" />
                                    <ColumnDefinition Width="0.9*" />
                                    <ColumnDefinition Width="0" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.5*" />
                                    <RowDefinition Height="0.1*" />
                                    <RowDefinition Height="0.2*" />
                                    <RowDefinition Height="0.1*" />
                                    <RowDefinition Height="0.5*" />
                                </Grid.RowDefinitions>
                                <Path Grid.Row="1"
                                    Grid.Column="1"
                                    Grid.RowSpan="3"
                                    Margin="0,1,0,1"
                                    Stretch="Fill"
                                    Data="F1 M 0,5.39581C -7.62939e-005,1.41663 13.6876,0 13.6876,0L 292.188,0C 292.188,0 308.389,1.77209 308.389,5.39581C 308.389,9.01953 292.188,10.5625 292.188,10.5625L 13.6875,10.5625C 13.6875,10.5625 9.15527e-005,9.375 0,5.39581 Z" >
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF7A661C" Offset="0.01"/>
                                            <GradientStop Color="#FFB8A228" Offset="0.495814"/>
                                            <GradientStop Color="#FFF7DF34" Offset="0.01"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Grid>
                            <Grid Grid.Column="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.25*" />
                                    <RowDefinition Height="1*" />
                                    <RowDefinition Height="0.25*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.25*" />
                                    <ColumnDefinition Width="1*" />
                                    <ColumnDefinition Width="0.25*" />
                                </Grid.ColumnDefinitions>
                                <Ellipse Grid.Column="1"
                                     Grid.Row="1"
                                     Stretch="Uniform"
                                     StrokeThickness="2" Width="16" Height="16" Fill="Black"
                                     >
                                    <Ellipse.Stroke>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFF7DF34" Offset="0"/>
                                            <GradientStop Color="#FF7A661C" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Stroke>
                                </Ellipse>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="telerikgauges:RadialGauge">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <ContentControl
                                    Template="{StaticResource CustomRadialGaugeBackground}"
                                    Width="{TemplateBinding Height}" Height="{TemplateBinding Height}"
                                    />
                                <ItemsPresenter />
                                <ContentControl
                                    Template="{StaticResource CustomRadialGaugeForeground}"
                                    Width="{TemplateBinding Height}" Height="{TemplateBinding Height}"
                                    />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource TelerikRadialGaugeViewModelDataSource}" />
    </UserControl.DataContext>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="GotFocus">
            <galaEx:EventToCommand
                Command="{Binding ViewFocusCommand, Mode=OneWay}"
                />
        </i:EventTrigger>
        <i:EventTrigger EventName="LostFocus">
            <galaEx:EventToCommand
                Command="{Binding ViewLostFocusCommand, Mode=OneWay}"
                />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <telerikgauges:RadialGauge
            Width="400" Height="400">
            <telerikgauges:RadialScale
                IsInteractive="False"
                MiddleTicks="1"
                MinorTicks="2"
                Radius="1" IsLabelRotated="False">

                <telerikgauges:RadialScale.MajorTick>
                    <telerikgauges:TickProperties
                        Location="CenterInside"
                        ItemTemplate="{StaticResource CustomRadialGaugeTick}"
                        />
                </telerikgauges:RadialScale.MajorTick>

                <telerikgauges:RadialScale.MinorTick>
                    <telerikgauges:TickProperties
                        Length="0.05"
                        Location="CenterInside"
                        ItemTemplate="{StaticResource CustomRadialGaugeTick}"
                        />
                </telerikgauges:RadialScale.MinorTick>

                <telerikgauges:RadialScale.Label>
                    <telerikgauges:LabelProperties
                        FontSize="18"
                        Location="Inside"
                        ItemTemplate="{StaticResource CustomRadialGaugeTickLabel}"
                        />
                </telerikgauges:RadialScale.Label>

                <telerikgauges:RadialScale.Indicators>
                    <!--
                        FUNKYKB: the Needle animation will not work
                        when Needle.Value is bound to a View Model
                    -->
                    <telerikgauges:Needle x:Name="Needle"
                        IsAnimated="True" Duration="0:0:1"
                        Style="{StaticResource CustomNeedle}"
                        />
                </telerikgauges:RadialScale.Indicators>

            </telerikgauges:RadialScale>
        </telerikgauges:RadialGauge>
    </Grid>
</UserControl>
